<template>
  
	<view class="goods-item">
	      <!-- 左 -->
	      <view class="goods-item-left">
          <!-- 购物车选中按钮 -->
          <radio :checked="goods.goods_state" color="#c00000" v-if="showRadio" @click="redioChangeHandler"></radio>
	        <image :src="goods.goods_small_logo||defaultImg" mode="" class="goods-pic"></image>
	      </view>
	      <!-- 右 -->
	      <view class="goods-item-right">
	          <!-- 标题 -->
	          <view class="goods-name">{{goods.goods_name}}</view>
            <view class="goods-info-box">
              <!-- 价格 -->
              <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
              <!-- 商品数量 -->
              <uni-number-box @change="numChangeHandler" v-if="showNum" :min="1" :value="goods.goods_count"></uni-number-box>
            </view>
	          
	      </view>
	  </view>
	
</template>

<script>
	export default {
    props:{
      // 传进来的对象
      goods:{
        type:Object,
        default:{}
      },
      // 是否展示radio
      showRadio:{
        type:Boolean,
        default:false
      },
      // 商品数量
      showNum:{
        type:Boolean,
        default:false
      },
    },
		data() {
			return {
				// 默认图片
				defaultImg:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			};
		},
    // 过滤器
    filters:{
      // 价格保留小数点后两位 用管道绑定直接使用|不用传值
      tofixed(num){
        return Number(num).toFixed(2)
      }
    },
    // 方法
    methods:{
      // 点击事件，调用方法
      redioChangeHandler(){
        // 传父
        this.$emit('radio-change',{
          goods_id:this.goods.goods_id,
          goods_state:!this.goods.goods_state
        })
      },
      // 修改商品传父
      numChangeHandler(val){
        // console.log(val);
        this.$emit('num-change',{
          goods_id:this.goods.goods_id,
          goods_count:+val
        })
      },
    }
	}
</script>

<style lang="scss">
 // 商品项
    .goods-item{
      width: 750rpx;
      box-sizing: border-box;
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;
       // 左侧图片
       .goods-item-left{
         margin-right: 5px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .goods-pic{
           height: 100px;
           width: 100px;
           display: block;
         }
       }
       // 右侧
       .goods-item-right{
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         // 名字
         .goods-name{
           font-size: 13px;
         }
         // 商品数量
         .goods-info-box{
           display: flex;
           justify-content: space-between;
           align-items: center;
         }
         // 价格
         .goods-price{
           font-size: 16px;
           color: #c00000;
         }
         
       }
    }
  
</style>
